<script setup>
import { toRefs, ref } from 'vue';


const props = defineProps({
    activeName: {
        default: '',
        type: String
    }
})
const emit = defineEmits(['typeChange'])

let { activeName } = toRefs(props)

// let activeNameCopy = ref(activeName.value)

const changeAction = (value) => {
    emit('typeChange', value)
}

</script>

<template>
    <div class="typeHeader">
        <div class="type-conetent">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="changeAction" :stretch="true">
                <el-tab-pane label="全部"></el-tab-pane>
                <el-tab-pane label="球鞋测评"></el-tab-pane>
                <el-tab-pane label="潮流穿搭"></el-tab-pane>
                <el-tab-pane label="实战利器"></el-tab-pane>
                <el-tab-pane label="休闲慢跑"></el-tab-pane>
                <el-tab-pane label="好物分享"></el-tab-pane>
                <el-tab-pane label="专业竞速"></el-tab-pane>
                <el-tab-pane label="谍照首发"></el-tab-pane>
                <el-tab-pane label="运动装备"></el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.typeHeader {
    width: 100%;
    background-color: rgb(255, 255, 255);
    height: 81px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: #eee 0 3px 5px 0;
    transition: all ease .5s;

    .type-content {
        // width: 1300px;
        width: 90%;
    }
}
</style>